@extends('admin.common.admin')

@section('cnt')
    {{-- 面包屑导航 --}}
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 房源管理
        <span class="c-gray en">&gt;</span> 添加房源
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        {{-- 消息提示 --}}
        @include('admin.common.msg')

        <form class="form form-horizontal" id="addform" method="post" action="{{ route('admin.fang.store') }}">
            @csrf
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源名称：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('fang_name') }}"
                           name="fang_name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>小区名称：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('fang_xiaoqu') }}"
                           name="fang_xiaoqu">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>小区地址：</label>
                <div class="formControls col-sm-10">
                    <span class="select-box" style="width:100px;">
                        <select class="select" name="fang_province" size="1" onchange="changeCity(this,'fang_city')">
                            <option value="0">=请选择省份=</option>
                            @foreach($pData as $item)
                                <option value="{{$item['id']}}">{{$item['area']}}</option>
                                @endforeach
                        </select>
                    </span>
                    <span class="select-box" style="width:100px;">
                        <select class="select" name="fang_city" size="1" onchange="changeCity(this,'fang_region')" id="fang_city">
                            <option value="0">==市==</option>
                        </select>
                    </span>
                    <span class="select-box" style="width:100px;">
                        <select class="select" name="fang_region" size="1" id="fang_region">
                            <option value="0">==区==</option>
                        </select>
                    </span>
                    <span class="select-box" style="width:600px;border: none;">
                        <input type="text" name="fang_addr" placeholder="详细地址" class="input-text">
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源租金：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" name="fang_rent"
                           value="{{ old('fang_rent') }}">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源楼层：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('fang_floor') }}"
                           name="fang_floor">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>租期方式：</label>
                <div class="formControls col-sm-10">
                    <span class="select-box" style="width:200px;">
                        <select class="select" name="fang_rent_type" size="1">
                            @foreach($attrData['fang_rent_type']['sub'] as $item)
                                <option value="{{$item['id']}}">{{$item['name']}}</option>
                            @endforeach
                        </select>
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>几室：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('fang_shi') }}"
                           name="fang_shi">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>几厅：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('fang_ting') }}"
                           name="fang_ting">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>几卫：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('fang_wei') }}"
                           name="fang_wei">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源朝向：</label>
                <div class="formControls col-sm-10">
                    <span class="select-box" style="width:200px;">
                        <select class="select" name="fang_direction" size="1">
                            @foreach($attrData['fang_direction']['sub'] as $item)
                                <option value="{{$item['id']}}">{{$item['name']}}</option>
                            @endforeach
                        </select>
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>租赁方式：</label>
                <div class="formControls col-sm-10">
                    <span class="select-box" style="width:200px;">
                        <select class="select" name="fang_rent_class" size="1">
                            @foreach($attrData['fang_rent_class']['sub'] as $item)
                                <option value="{{$item['id']}}">{{$item['name']}}</option>
                            @endforeach
                        </select>
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>租房小组：</label>
                <div class="formControls col-sm-10">
                    <span class="select-box" style="width:200px;">
                        <select class="select" name="fang_group" size="1">
                             @foreach($attrData['fang_group']['sub'] as $item)
                                <option value="{{$item['id']}}">{{$item['name']}}</option>
                            @endforeach
                        </select>
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>建筑面积：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('fang_build_area') }}"
                           name="fang_build_area">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>使用面积：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('fang_using_area') }}"
                           name="fang_using_area">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>建筑年代：</label>
                <div class="formControls col-sm-10">
                    <input type="text" class="input-text" value="{{ old('fang_year') }}" name="fang_year">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>配套设施：</label>
                <div class="formControls col-sm-10">
                    @foreach($attrData['fang_config']['sub'] as $item)
                        <label>
                            <input type="checkbox" name="fang_config[]" value="{{$item['id']}}">{{$item['name']}}
                        </label>
                    @endforeach
                    <label>
                        <input type="checkbox" name="fang_config[]" value="1">电视&nbsp;
                    </label>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源业主：</label>
                <div class="formControls col-sm-10">
                    <span class="select-box" style="width:200px;">
                        <select class="select" name="fang_owner" size="1">
                            @foreach($ownerData as $item)
                            <option value="{{$item->id}}">{{$item->name}}</option>
                                @endforeach
                        </select>
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>是否推荐：</label>
                <div class="formControls col-sm-10 skin-minimal">
                    <div class="radio-box">
                        <input name="is_recommend" type="radio" value="0" checked>
                        <label for="sex-1">不推荐</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="sex-2" name="is_recommend" value="1">
                        <label for="sex-2">推荐</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源图片：</label>
                <div class="formControls col-sm-10">
                    <div id="picker">上传房源图片</div>
                    <input type="hidden" name="fang_pic" id="pic">
                    <div class="showpic"></div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源描述：</label>
                <div class="formControls col-sm-10">
                    <textarea name="fang_desn" class="textarea"></textarea>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源详情：</label>
                <div class="formControls col-sm-10">
                    <textarea name="fang_body" id="fang_body"></textarea>
                </div>
            </div>
            <div class="row cl">
                <div class="col-sm-10 col-sm-offset-2">
                    <input class="btn btn-primary radius" type="submit" value="添加房源">
                </div>
            </div>
        </form>
    </article>
@endsection
@section('css')
    <link rel="stylesheet" href="/admin/lib/webuploader/0.1.5/webuploader.css"/>
    <style>
        .showpic {
            display: inline-block;
        }

        .showpic img {
            margin-left: 10px;
        }
    </style>
@endsection
@section('js')
    {{--富文本js引入--}}
    <script src="/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
    <script src="/admin/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
    <script src="/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
    {{--异步文件上传插件js--}}
    <script src="/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
    <script>
        // 富文本
        // 富文本初始化
        const ue = UE.getEditor('fang_body');
        // 用于csrf验证的
        const TOKEN = "{{ csrf_token() }}";
        // 异步文件上传 发起POST请求 post触发csrf验证
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传
            auto: true,
            // swf文件路径
            swf: '/admin/lib/webuploader/0.1.5/Uploader.swf',
            // 上传文件处理的后台路由
            server: "{{ route('admin.fang.upfile') }}",
            // 选择文件的按钮。可选。
            pick: {
                id: "#picker",
                multiple: true
            },
            // 验证上传文件总数量
            fileNumLimit: 10,
            // 额外参数
            formData: {
                _token: TOKEN,
                node: 'fang'
            },
            // 表单域名称
            fileVal: 'file',
            // 压缩
            resize: true,
            // 只上传图片
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 回调方法 上传成功后完成的方法
        uploader.on('uploadSuccess', function (file, response) {
            // 字符串追加
            let val = $('#pic').val();
            val += '#' + response.pic;
            $('#pic').val(val);

            let html = `<img src="${response.pic}" style="width: 100px;">`;
            $('.showpic').append(html);
        });

        // 表单验证
        $("#addform").validate({
            // 验证规则
            rules: {
                name: {
                    required: true
                }
            },
            // 取消回车事件
            onkeyup: false,
            // 验证成功时的样式名称
            success: "valid",
            // 验证成功后，回调事件  form dom对象
            submitHandler: function (form) {
                form.submit();
            }
        });
        //地区下拉列表选中事件
        //nextSelector  下级操作的id选择值
        function changeCity(obj,nextSelector) {
            //选中的id值
            let pid=obj.value;
            //发送ajax请求获取下级数据
            $.get("{{route('admin.fang.area')}}",{pid}).then(ret=>{
               let html='<option value="0">请选择</option>';
               //es7提供的for of
                for(let item of ret){
                    html+=`<option value="${item.id}">${item.area}</option>`;
                }
                $('#'+nextSelector).html(html);
            });
        }
    </script>
@endsection
